<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test">hello</div>
<div class="addPanel" id="vue">
    <div v-for="num in ParamsNum" :key="num">
        <div style="margin-bottom: 10px;">

        </div>
            <span :span="9">
                <input v-model="temp.params[num].key" placeholder="key" size="small"/>
            </span>
            <span :span="10">
                <input style="margin-left: 10px;" v-model="temp.params[num].value" placeholder="value" size="small"/>
            </span>
            <span :span="4" style="text-align: center;line-height: 30px;">
                <i class="el-icon-delete-solid" style="color:red;cursor: pointer;"
                   @click="handleDeleteParams(num)"></i>
            </span>
    </div>
    <button class="addBlock" @click="handleAddParams"><i class="el-icon-plus" style="font-weight: bold"></i> 添加请求参数</button>
</div>

</body>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../js/vue.js"></script>

<script>

    var vm = new Vue({
        el: "#vue",
        data() {
            return {
                temp: {
                    params: [{key:'',value:''}]
                },
                ParamsNum: 0
            }
        },

        methods: {

            handleAddParams() {
                this.temp.params.push({key:'',value:''})
                this.ParamsNum++
            },
            handleDeleteParams(num) {
                this.ParamsNum--
                this.temp.params.splice(num,1)
            }
        }


    });
</script>
</html>